<template>
  <div class="deviceMaintain-add-update-component">
    <el-dialog
      v-if="modelValue.visible"
      v-model="modelValue.visible"
      :title="
        !modelValue.form.id
          ? `新增${modelValue.title}`
          : `修改${modelValue.title}`
      "
      width="700px"
    >
      <div style="padding-right: 50px">
        <div
          style="
            background-color: #fdf5e2;
            font-size: 14px;
            padding: 12px;
            margin-bottom: 12px;
            color: #666;
            display: flex;
            align-items: flex-start;
          "
        >
          <img
            style="
              width: 14px;
              height: 14px;
              margin-right: 4px;
              margin-top: 4px;
            "
            src="@/assets/images/warn.png"
            alt=""
          />
          为了确保设备正常的运行，防止因网络问题导致没有获取到最新数据或数据丢失，设置允许机台断网时间，默认7天，超出后执行锁机。
        </div>
        <el-form
          :model="modelValue.form"
          :rules="modelValue.rules"
          ref="addEditRef"
          :label-width="170"
        >
          <el-form-item label="设备分类" prop="categoryId">
            <el-select
              style="width: 100%"
              v-model="modelValue.form.categoryId"
              placeholder="选择设备分类"
            >
              <el-option
                v-for="option in modelValue.deviceCategoryList"
                :key="option.id"
                :label="option.name"
                :value="option.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="允许机台断网时间" prop="remindBeforeDays">
            <div>
              <el-input
                placeholder="请输入天数"
                style="width: 420px"
                v-model="modelValue.form.remindBeforeDays"
                autocomplete="off"
              />
              <span style="margin-left: 12px">天</span>
            </div>
          </el-form-item>
          <el-form-item
            label="最多允许断网提醒时间"
            prop="remindAfterDays"
            style="margin: 0"
          >
            <div>
              <el-input
                style="width: 420px"
                placeholder="请输入天数"
                v-model="modelValue.form.remindAfterDays"
                autocomplete="off"
              />
              <span style="margin-left: 12px">天</span>
            </div>
          </el-form-item>
          <el-form-item style="margin: 0">
            <div
              style="
                color: #eba535;
                font-size: 12px;
                line-height: 14px;
                padding: 6px 0;
              "
            >
              断网7天后，在最多允许断网提醒时间内将会进行弹框提示，超出时间后可设置是否进行锁机处理
            </div>
          </el-form-item>

          <el-form-item label="断网提示标题" prop="remindTitle">
            <el-input
              placeholder="请输入断网提示标题"
              v-model="modelValue.form.remindTitle"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="断网提示内容" prop="remindContent">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入断网提示内容"
              v-model="modelValue.form.remindMsg"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="断网超出时间是否锁机" prop="needLock">
            <el-switch v-model="modelValue.form.needLock"></el-switch>
          </el-form-item>
          <el-form-item
            v-if="modelValue.form.needLock"
            label="断网超出时间锁机标题"
            prop="lockTitle"
          >
            <el-input
              placeholder="请输入断网超出时间锁机标题"
              v-model="modelValue.form.lockTitle"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            v-if="modelValue.form.needLock"
            label="断网超出时间锁机内容"
            prop="lockContent"
          >
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入断网超出时间锁机内容"
              v-model="modelValue.form.lockMsg"
              autocomplete="off"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer v-if="!modelValue.form.disabled">
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="ensure"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import {
  addDeviceLockNetwork,
  updateDeviceLockNetwork,
} from "@/api/dms-device-lock-network.api";
import {
  getDeviceCategoryPagination,
  getDeviceCategoryAllList,
} from "@/api/dms-device-category.api";

const props = defineProps(["modelValue"]);
const addEditRef = ref<FormInstance>();

/***
 * 确认弹框
 */
const ensure = () => {
  let form = props.modelValue.form;
  let formData = {
    categoryId: form.categoryId,
    remindBeforeDays: form.remindBeforeDays,
    remindAfterDays: form.remindAfterDays,
    remindTitle: form.remindTitle,
    remindMsg: form.remindMsg,
    needLock: form.needLock ? 1 : 0,
    lockTitle: form.lockTitle,
    lockMsg: form.lockMsg,
  };

  if (!addEditRef.value) return;
  addEditRef.value.validate((valid, fields) => {
    if (valid) {
      if (form.id) {
        updateDeviceLockNetwork({
          ...formData,
          id: form.id,
        })
          .then((res) => {
            cancel();
            ElMessage({
              message: props.modelValue.title + "修改成功",
              type: "success",
            });
            if (props.modelValue.refreshDataList) {
              props.modelValue.refreshDataList();
            }
          })
          .catch((err) => {
            ElMessage({
              message: err.msg || err,
              type: "error",
            });
          });
        return;
      }

      addDeviceLockNetwork(formData)
        .then((res) => {
          cancel();
          ElMessage({
            message: props.modelValue.title + "新增成功",
            type: "success",
          });
          if (props.modelValue.refreshDataList) {
            props.modelValue.refreshDataList();
          }
        })
        .catch((err) => {
          ElMessage({
            message: err.msg || err,
            type: "error",
          });
        });
    }
  });
};

/***
 * 取消弹框
 */
const cancel = () => {
  props.modelValue.visible = false;
};
</script>
<style lang="scss" scoped></style>
